<template>
    <div class="com_home">
        <div class="home_title">
            <img src="@/assets/logo.png" alt="">
            <div class="tittle_text">
                <h4>进思教育后台</h4>
                <span>back-stage management</span>
            </div>
        </div>
        <ul class="home_nav_list">
            <li>
                <i class="el-icon-odometer"></i>
                <span>卓新思创</span>
            </li>
            <li>
                <i class="el-icon-chat-line-square"></i>
                <span>在线客服</span>
            </li>
            <li>
                <i class="el-icon-tickets"></i>
                <span>常见问题</span>
            </li>
            <li @click="safeHome=true">
                <i class="el-icon-lock"></i>
                <span>安全中心</span>
            </li>
            <li>
                <i class="el-icon-switch-button"></i>
                <span @click="quit">退出</span>
            </li>
            <li>
                <i class="el-icon-user-solid"></i>
                <span v-if="userObj.userName">{{ userObj.userName }}</span>
                <span v-else @click="$router.push({name:'login'})">登陆</span>
            </li>
        </ul>
        <!-- 设置弹出层,安全中心的对话框 -->
        <el-dialog width="40%" title="修改密码" :visible.sync="safeHome">
            <el-form ref="passForm" :rules="ruleObj" :model="formObj" label-width="90px">
                <el-form-item label="原密码:" prop="userPwd">
                    <el-input v-model="formObj.userPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码:" prop="newPwd">
                    <el-input v-model="formObj.newPwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" prop="surePwd">
                    <el-input v-model="formObj.surePwd"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="sureEdit">确认修改</el-button>
                <el-button type="danger" @click="safeHome=false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {EditPass} from '@/api/common.js';
//引入 api
import {getUser,quitLogin} from '@/api/common.js'
export default {
    data(){
        return{
            safeHome:false,//通过改变该值的状态,实现弹出层的显示与隐藏
            //设置规则
            ruleObj:{
                //表单规则
                userPwd:{
                    required:true,
                    message:'原密码必填',
                    trigger:'blur'
                },
                newPwd:{
                    required:true,
                    message:'新密码必填',
                    trigger:'blur'
                },
                surePwd:{
                    required:true,
                    message:'确认密码必填',
                    trigger:'blur'
                }
            },
            //收集数据
            formObj:{
                userPwd:"",//原密码
                newPwd:'',//新密码
                surePwd:""//确认密码
            },
            //请求到的用户信息的初始值
            userObj:{}
        }
    },
    created(){
        this.getMyuserInfo()//获取用户信息
    },
    methods:{
        sureEdit(){
            //获取表单 调用表单的验证方法
            this.$refs.passForm.validate(async vali =>{
                // console.log(vali)
                if(vali && this.formObj.newPwd == this.formObj.surePwd){
                    //表单验证通过 修改密码接口
                    var res = await EditPass({
                        userPwd:this.formObj.userPwd,
                        newPwd:this.formObj.newPwd
                    })
                    console.log(res)
                    if(res.data.success){
                        this.$message.success('修改成功,返回重新登录')
                        this.$router.push('/login')
                    }else{
                        this.$message.error('原密码错误')
                    }
                }
            })
        },
        //获取用户信息
        async getMyuserInfo(){
            var res = await getUser();
            console.log(res)
            this.userObj = res.data
        },
        //退出
        async quit(){
            var res = await quitLogin();
            this.$message.success('退出成功');
            this.$router.push('/login');
            localStorage.token = ""//清空本地存储的token
            this.$store.dispatch('ActionToken','')
            console.log(res)
        }
    }
}
</script>

<style lang="less" scoped>
.com_home {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .home_title {
        width: 30%;
        display: flex;
        align-items: center;

        >img {
            width: 50px;
        }

        .tittle_text {
            color: white;

            h4 {
                font-size: 18px;
            }

            span {
                font-size: 14px;
            }
        }
    }

    .home_nav_list {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        li {
            margin: 0 5px;
            font-size: 14px;

            a {
                color: white;
                text-decoration: none;
            }

            span {
                margin-left: 5px;
            }
        }
    }
}</style>